<template>
	<view class="cu-modal" :class="modalState.modals=='delModal'?'show':''" @tap="hideModal" @touchmove.stop.prevent="()=>{return}">
		<view class="cu-dialog"  @tap.stop>
			<view class="cu-bar bg-white justify-end">
				<!-- 确认删除？ -->
				<view class="content">确认删除？</view>
			</view>
			<!-- 确认后，数据将永久删除！ -->
			<view class="padding-xl">确认后，数据将永久删除！</view>
			<view class="cu-bar bg-white">
				<!-- 取消 -->
				<view class="action margin-0 flex-sub " @tap="hideModal">取消</view>
				<!-- 确认 -->
				<view class="action margin-0 flex-sub text-red solid-left" @tap="confirm">确认</view>
			</view>
		</view>
	</view>
</template>

<script>
  export default {
    props: {
      modalName: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        modalState: {
          modals: this.modalName
        }
      }
    },
    watch:{
      modalName(news, olds){
        this.modalState.modals = news;
      }
    },
    methods: {
      confirm () {
        this.$emit('confirmClick')
      },
      hideModal () {
        this.$emit('changeModalName', '')
      }
    }
  }
</script>

<style lang="less" scope>
@import '@/common/style/main.css';
</style>
